<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import './Widgets/widgets.css';

// 设置cesium 静态资源路径
window.CESIUM_BASE_URL = '/';

// 天地图 官网申请的key https://console.tianditu.gov.cn/api/key
const webKey = '01fc395160d8eb3b82aefe65b2280e58';

Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDkwYWVhOS0wNzI5LTQ3OTEtOWFiMC1kY2M3MTFiM2I2NWQiLCJpZCI6MTkyNTU1LCJpYXQiOjE3MDY1MTM0MTh9.YAPVHr1d7PBuWayCXM9deCxKg3AbtsXUJiVpubVS3NY';

// https://cesium.com/learn/cesiumjs/ref-doc/SampledPositionProperty.html?classFilter=sam
// new Cesium.SampledPositionProperty(referenceFrame, numberOfDerivatives)

onMounted(async () => {
  // 地球视图，底图加载
  const viewer = new Cesium.Viewer('container', {
    //信息窗口
    infoBox: true, // 可查看某个建筑的详细信息
    // shouldAnimate: true, // 运动状态
    //设置地形
    terrainProvider: Cesium.createWorldTerrain({
      requestWaterMask: true, // 水纹效果  海里面有波浪的效果
      requestVertextNormal: true, // 光照效果
    }),
  });

  //隐藏cesium Icon-logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';

  // 3d建筑
  const tiles3d = Cesium.createOsmBuildings();
  const osmBuildings = viewer.scene.primitives.add(tiles3d);

  // 广州塔
  const positon = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 1000);

  viewer.camera.setView({
    destination: positon,
    // duration: 2,
    orientation: {
      heading: Cesium.Math.toRadians(0), // 方向
      pitch: Cesium.Math.toRadians(-40), // 倾斜角度，负值表示向下倾斜
      roll: 0.0, // 翻滚角度
    },
  });

  // 自定义设置建筑的样式 api https://cesium.com/learn/cesiumjs/ref-doc/Cesium3DTileStyle.html?classFilter=Cesium3DTileStyle
  // tiles3d.style = new Cesium.Cesium3DTileStyle({
  //   // color: "color('yellow')",
  //   color: 'rgba(255,255,0,0.5)',
  //   show: true,
  // });

  tiles3d.style = new Cesium.Cesium3DTileStyle({
    color: {
      conditions: [
        [
          "${feature['building']} === 'apartments'",
          "color('rgba(50,255,0,0.5)')",
        ],
        ["${feature['building']} === 'office'", "color('rgba(255,255,0,0.5)')"],
        [
          "${feature['cesium#estimatedHeight']} > 300",
          "color('rgba(200,200,255,0.9)')",
        ],
        [
          "${feature['cesium#estimatedHeight']} > 100",
          "color('rgba(100,100,255,0.9)')",
        ],
        [
          "${feature['cesium#estimatedHeight']} > 50",
          "color('rgba(200,50,15,0.9)')",
        ],
        ['true', 'color("white")'],
      ],
    },
    show: true,
  });
});
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
#container {
  height: 94vh;
  width: 94vw;
}
</style>
